<template>
  <div class="search-suggest">
    <van-cell icon="search"
    v-for="(suggestStr,index) in suggestions"
    :key="index"
    @click="$emit('search',suggestStr)"
    >
      <template #title>
        <div v-html="highLight(suggestStr)"></div>
      </template>
    </van-cell>
  </div>
</template>
<script>
import { getSearchSuggestion } from '@/apis/search'
import { debounce } from 'loadsh'
export default {
  name: 'SearchSuggest',
  props: {
    searchTxt: {
      type: String,
      require: true
    }
  },
  data () {
    return {
      suggestions: []
    }
  },
  watch: {
    searchTxt: {
      handler: debounce(async function () {
        const { data } = await getSearchSuggestion(this.searchTxt)
        this.suggestions = data.data.options
      }, 1000),
      immediate: true
    }
  },
  computed: {
    highLight () {
      return str => {
        let exp = new RegExp(this.searchTxt, 'gi')
        return str.replace(exp, `<span style="color:red">${this.searchTxt}</span>`)
      }
    }
  },
  created () {

  },
  methods: {

  }
}
</script>
<style lang="less" scoped>

</style>
